use:popper with PopperJS

Posted on 2023-04-10 by

henrikvilhelmberglund

We have used actions on a single element but now we want to use PopperJS which needs two elements, an element and a tooltip element. How do we do this?

One approach we could try is to have function that returns two actions .

Try changing the dropdown!

Hello world

Tooltip

<script>
	import createPopperAction from "./usePopper";

	const [usePopperElement, usePopperTooltip] = createPopperAction();

	let placement = "bottom-start";
	let showTooltip = true;
</script>

<div use:usePopperElement class="element">
	<p>Hello world</p>
</div>

<label>
	<input type="checkbox" bind:checked={showTooltip} />
	Show Tooltip
</label>

<select bind:value={placement}>
	{#each ["top", "bottom", "left", "right"] as side}
		{#each ["-start", "", "-end"] as align}
			<option value={`${side}${align}`}>{side}{align}</option>
		{/each}
	{/each}
</select>

{#if showTooltip}
	<div
		class="tooltip"
		use:usePopperTooltip={{
			placement: placement,
			modifiers: [
				{
					name: "offset",
					options: {
						offset: [0, 10],
					},
				},
			],
		}}>
		<p>Tooltip</p>
	</div>
{/if}

<style>
	.tooltip {
		padding: 4px;
		border-radius: 4px;
		background: white;
		box-shadow: 2px 2px 2px #ddd;
		border: 1px solid #bbb;
	}
	.element {
		padding: 8px 16px;
		border: 1px solid black;
		width: 100px;
		height: 100px;
		display: grid;
		place-items: center;
		margin: 80px;
	}
</style>

We assign the variables (which are action functions) with destructuring and can them use them as actions .

We only create the popper instance when both the element and tooltips exist and then can use the fancy PopperJS tooltip functionality.